<template>
  <div class="center">
    <el-page-header title="企业网站门户管理系统" content="个人中心" />
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="head-card" style="text-align: center">
          <el-avatar :size="100" :src="avatarImg" />
          <h3>{{ username }}</h3>
          <h5>{{ role == 1 ? "管理员" : "编辑" }}</h5>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="head-card">
          <template #header>
            <div class="card-header">
              <span>个人信息</span>
            </div>
          </template>
          <el-form
            ref="userFormRef"
            style="max-width: 600px"
            :model="userForm"
            status-icon
            :rules="userFormRules"
            label-width="auto"
            class="demo-ruleForm"
          >
            <el-form-item label="用户名" prop="username">
              <el-input
                v-model="userForm.username"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-select v-model="userForm.gender" placeholder="请选择你的性别">
                <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item.lable"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="简介" prop="introduction">
              <el-input
                v-model="userForm.introduction"
                type="textarea"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item label="头像" prop="avatar">
              <Upload :avatar="userForm.avatar" @zxychange="handleAvatar"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm"> 更新 </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import Upload from "@/components/upload/Upload";
import store from "@/store/index";
import { computed, ref, reactive } from "vue";
import request from "@/util/request";
import axios from "axios";
import { ElMessage } from "element-plus";
import upload from "@/util/upload";
const { username, role, avatar, introduction, gender } = store.state.userInfo;

const userFormRef = ref();
const userForm = reactive({
  username,
  role,
  avatar,
  introduction,
  gender,
  file: null,
});

const handleAvatar = (file)=>{
   // console.log(file);  file.raw代表图片的原生对象
   userForm.avatar = URL.createObjectURL(file);
   userForm.file = file; //把头像的原生对象添加到提交表单数据中
}

// 头像的计算属性  (http://localhost:3000"+avatar是因为图片下载到了项目文件)
const avatarImg = computed(() =>
  avatar
    ? "http://localhost:3000" + avatar
    : "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
);

// 性别
const options = [
  { lable: "保密", value: 0 },
  { lable: "男", value: 1 },
  { lable: "女", value: 2 },
];
// 用户表单规则
const userFormRules = reactive({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  introduction: [{ required: true, message: "请输入简介", trigger: "blur" }],
  avatar: [{ required: true, message: "请选择头像" }],
  gender: [{ required: true, message: "请选择性别", trigger: "blur" }],
});

// 更新个人信息
const submitForm = () => {
  userFormRef.value.validate(async (valid) => {
    if (valid) {
      const res = await upload("/adminapi/user/upload", userForm);
      if (res.data.ActionType === "OK") {
        store.commit("changeUserInfo", res.data.data);
        ElMessage.success("更新成功!");
      }
    }
  });
};
</script>

<style scoped lang="scss">
.center {
  width: 100%;
  height: 100vh;
  .head-card {
    margin-top: 30px;
  }
  .card {
    margin-top: 30px;
    .el-carousel__item h3 {
      color: #475669;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
      text-align: center;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
  }
}
</style>
